<template>
  <div class="pdl-24 pdr-24">
    <div class="notice-header df aic fs-30 jcsb mb-40">
      <svg-icon icon-class="left" class="fs-30" @click="$router.replace('/dashboard')"></svg-icon>
      <p>账号设置</p>
    </div>
    <van-form @submit="handleSubmit" class="fs-32">
      <van-cell-group inset>
        <van-field
          class="fs-28"
          v-model="formInline.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          disabled
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <div class="pdt-24 pdb-24"></div>
        <van-field
          class="fs-28"
          v-model="formInline.oldPassword"
          type="password"
          name="原密码"
          label="原密码"
          placeholder="请输入原密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div class="pdt-24 pdb-24"></div>
        <van-field
          class="fs-28"
          v-model="formInline.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div class="pdt-24 pdb-24"></div>
        <van-field
          class="fs-28"
          v-model="formInline.confirmPassword"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button class="fs-28 pdt-40 pdb-40" block type="primary" native-type="submit">
          确定
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useStore } from '@/store';
  import { postNoticeList } from '@/api/common';
  import { SvgIcon } from '@/components/svg-icon';

  export default defineComponent({
    name: 'SafeComponent',
    components: {
      SvgIcon,
    },
    setup() {
      const route = useRoute();

      const router = useRouter();

      const store = useStore();

      const state = reactive({
        formInline: {
          username: '10333022123',
          password: '',
          oldPassword: '',
          confirmPassword: '',
        },
      });

      /**
       * @description 加载表格数据
       */

      onMounted(async () => {});

      const handleSubmit = async () => {
        router.replace('/dashboard');
      };

      return {
        ...toRefs(state),
        handleSubmit,
      };
    },
  });
</script>
<style lang="scss" scoped>
  .notice-header {
    height: 68px;
    &:after {
      content: '';
    }
  }
  .notice-item {
    padding: 24px;
    border-bottom: 1px solid #ccc;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
    width: 656px;
  }
</style>
